<template>
  <div id="app">
    <table>
      <caption>欢迎光临_vue开发的收银_水果店</caption>
        <th>苹果10￥/斤,折扣《 8折》</th>
        <tr>请输入你要购买的斤数 <input type="text" v-model.number="num" /></tr>
        <tr><button @click="fn">结账买单</button></tr>
        <tr> 结账单:总价: {{ total }}￥元 折后价: {{ sale }}￥元 省了:
          {{ save }}￥元</tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      total: "",
      sale: "",
      save: "",
    };
  },
  methods: {
    fn() {
      this.total = this.num * 10;
      this.sale = this.total * 0.8;
      this.save = this.total - this.sale;
    },
  },
};
</script>

<style>
table{
  border-collapse:collapse;
  width: 800px;
  height: 120px;
  border: 1px solid #000;
  text-align: center;
  margin: 0 auto;
}
tr{
  border: 1px solid #000;
}
</style>